## 15. Web Page Remote Monitor Light Value
Environment monitoring is a crutial part to enhance the comfort of the teaching and optimize energy management. Thereinto, intensity of light directly affects students’ learning efficiency and visual health. So ,reasonable regulation of classroom lighting can not only save energy and reduce emissions but also create a more suitable learning environment.
In this project, we will monitor and visualize indoor light conditions in real time through Internet of Things, which provides basic solutions for applications such as intelligent lighting and energy-saving management, and contributes to the construction of green and smart school.
==补手机页面和结构的图==
#### Principle
1. Data collection
Voltage division by photoresistor → The ADC pins of ESP32 (analog-to-digital)
2. Data processing
ESP32 → Router → Mobile phone/Computer
3. Web page interaction
Browser request → Server response → Return the light value and refresh the display
#### Code Flow
```mermaid
graph LR
A[Photoresistor] -->|analog signals| B(ESP32 ADC)
B -->|digital signals| C[Web Server]
C -->|HTTP response| D[Browser]
D -->|timed request| C
```
#### Test Code
```c++
#include
#include
// Replace with your WiFi name and passwords
const char* ssid = "YourWiFiSSID";
const char* password = "YourWiFiPassword";
WebServer server(80);
// The pins connected to the photoresistor
const int lightSensorPin = 34;
// Store sensor value
int sensorValue = 0;
void setup() {
Serial.begin(115200);
// Connect to WiFi
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi...");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Set the route
server.on("/", handleRoot);
server.on("/readLight", handleLightRead);
// Start the server
server.begin();
Serial.println("The HTTP server has been started.");
}
void loop() {
server.handleClient();
}
void handleRoot() {
String html = R"=====(
ESP32 Photoresistor
ESP32 Photoresistor
--
)=====";
server.send(200, "text/html", html);
}
void handleLightRead() {
sensorValue = analogRead(lightSensorPin);
String valueStr = String(sensorValue);
server.send(200, "text/plain", valueStr);
Serial.println("photoresistor value: " + valueStr);
}
```
#### Code Explanation
**Here covers extracurricular knowledge of HTML, CSS, and JS, so we only provide a brief introduction.**
**1. Initialization**
```c++
#include
#include
const char* ssid = "YourWiFiSSID"; // WiFi name
const char* password = "YourWiFiPassword"; // WiFi passwords
WebServer server(80); // Create a Web server (port 80)
const int lightSensorPin = 34; // Connect the photoresistor to GPIO34
```
- Introduce WiFi and WebServer libraries, and configure network and hardware pins.
**2. Main program logic**
```c++
void setup() {
// Initialize the serial port and WiFi connection
WiFi.begin(ssid, password);
// Set two routes
server.on("/", handleRoot); // Return to the HTML page
server.on("/readLight", handleLightRead); // Return sensor data
server.begin(); // Start the server
}
void loop() {
server.handleClient(); // Continuously handle client requests
}
```
- After starting the server, the web page requests are processed repeatedly.
**3. Web page interaction**
**HTML page**
```c++
server.on("/", handleRoot);
```
```c++
void handleRoot() {
String html = R"=====(
...